<template slot-scope="scope">
  <div class="page-content">
    <!-- <dovecote-info></dovecote-info> -->
    <!-- 表格顶部区域开始 -->
    <TableBar :columns="columns" :layout="layout">
      <div slot="bottom">
        <el-col :span="3">
          <el-button type="primary" plain size="mini" @click="addEven"
            >新增订单</el-button
          >
        </el-col>
      </div>
      <div slot="top" class="search">
        <el-row>
          <el-col :span="7">
            <el-input
              placeholder="输入批次号查询"
              v-model="batchValue"
              size="small"
              @change="getDataByBatch"
            >
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-date-picker
              style="margin-left: 20px; width: 80%"
              size="small"
              v-model="dateValue"
              type="date"
              @change="pickDate"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
    </TableBar>
    <!-- 表格顶部区域结束 -->

    <!-- 表格区域开始 -->
    <TheTable
      :columns="columns"
      :layout="layout"
      ref="tableRef"
      :data="allList"
      :page.sync="page"
      :showPage="showPage"
      @changeSize="changeSize"
      @changePage="changePage"
    >
      <div
        v-for="(item, index) in columns"
        :key="index"
        class="item"
        effect="dark"
        placement="top-start"
      >
        <el-table-column
          :label="item.name"
          v-if="item.show"
          :prop="item.prop"
          show-overflow-tooltip
        ></el-table-column>
      </div>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #32CD32"
            icon="el-icon-share"
            @click="seeDetail(scope.row.farmBatch)"
            >详情</el-button
          >
          <el-button
            type="text"
            style="color: #fa6962"
            icon="el-icon-delete"
            @click="tableDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </TheTable>
    <!-- 表格区域结束 -->

    <!-- 添加订单区域开始 -->
    <AbnormalFrom
      :addInfo="addInfo"
      :editFrom="editFrom"
      :title="title"
      :dialogVisible="dialogVisible"
      @closeAddDialog="closeAddDialog"
      v-show="dialogVisible"
      @DisplayData="DisplayData"
    />
    <!-- 添加订单区域结束 -->

    <!-- 查看详情区域开始 -->
    <DetailFrom
      :detailDialog="detailDialog"
      :detailInfo="detailInfo"
      @closeAddDialog="closeAddDialog"
      v-show="detailDialog"
      @DisplayData="DisplayData"
    />
    <!-- 查看详情区域结束 -->
  </div>
</template>


<script>
import { mapState } from "vuex";
import { getAllCage } from "@/api/common.js";
import AbnormalFrom from "@/components/Dovecote/ProductionCount/AbnormalFrom";
import DetailFrom from "@/components/Dovecote/ProductionCount/DetailFrom";

import {
  getAllInfoByPage,
  deleteOrder,
  getByDateInfo,
  getInfoByBatch,
} from "@/api/Dovecote/ProductionCount/ShipmentOutBill.js";

export default {
  name: "EggOut",
  meta: {
    title: "鸽蛋出库",
  },
  components: {
    AbnormalFrom,
    DetailFrom
  },
  data() {
    return {
      //表名
      title: "",
      //分类
      searchType: {
        baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
        type: "鸽蛋",
      },
      //根据时间筛选
      searchByDate: {
        baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
        type: "鸽蛋",
        date: "",
      },
      //是否打开表单
      dialogVisible: false,
      layout: "search,refresh,column",
      //显示分页
      showPage: true,
      value: "",
      allList: [],
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      //鸽棚编号
      dovecoteList: [
        {
          id: 0,
          dovecoteNumber: "A01",
        },
        {
          id: 1,
          dovecoteNumber: "A02",
        },
        {
          id: 2,
          dovecoteNumber: "A03",
        },
      ],
      theType: {
        type: "鸽蛋",
      },
      //详情列表
      theTableData: [],
      columns: [
        { name: "id", show: false, prop: "id" },
        { name: "基地编号", show: true, prop: "baseId" },
        { name: "基地名称", show: false, prop: "baseName" },
        { name: "批次", show: true, prop: "farmBatch" },
        { name: "目的地", show: true, prop: "destination" },
        { name: "类型", show: false, prop: "type" },
        { name: "经手人", show: true, prop: "handler" },
        { name: "总数", show: true, prop: "amount" },
        { name: "总价", show: true, prop: "total" },
        { name: "时间", show: true, prop: "gmtCreate" },
        { name: "备注", show: true, prop: "remark" },
      ],

      addInfo: {
        baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
        baseName: "",
        destination: "",
        handler: "",
        remark: "",
        type: "鸽蛋",
        dovecoteOutBillDtoList: [
          {
            dovecoteDirector: "",
            dovecoteNumber: "",
            employeeName: "",
            remark: "",
            dovecoteOutBaseDtoList: [
              {
                amount: 0,
                remark: "",
                typeName: "",
                unitPrice: 0,
              },
            ],
          },
        ],
      },
      editFrom: {},
      dateValue: "",
      //根据批次号获取数据
      batchValue: "",
      theBatch: {
        farmBatch: "",
        baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
        type: "鸽蛋",
      },
      //是否打开详情表单
      detailDialog:false,
      //详细信息
      detailInfo:{},
    };
  },
  created() {
    this.init();
  },
  computed: {
    ...mapState({
      dovecoteNumber: (state) =>
        state.Usersetting.CurrentDovecote.dovecoteNumber,
    }),
  },
  watch: {
    dovecoteNumber() {
      this.searchType.pageSize = 10;
      this.searchType.pageNum = 1;
      this.getAllData();
    },
  },
  methods: {
    //设A01为初始鸽笼号
    async init() {
      await getAllCage({ baseId: this.searchType.baseId }).then((res) => {
        if (res.data.statusCode === 20000) {
          this.options = res.data.data;
          if (this.options.length > 0) {
            this.searchType.dovecoteNumber = this.options[0].dovecoteNumber;
            this.getAllData();
          }
        } else {
          return this.$message.error("获取鸽棚选项错误");
        }
      });
    },
    //根据分页获取数据
    async getAllData() {
      const { data: res } = await getAllInfoByPage(
        this.page.current,
        this.page.pageSize,
        this.searchType
      );
      console.log("请求到的列表", res);
      if (res.statusCode !== 20000) {
        this.$message.error("查询数据失败");
      } else {
        this.allList = res.data.records;
        this.page.total = res.data.total;
      }
    },
    // 根据鸽棚号获取数据
    async setAllList(e) {
      this.searchType.dovecoteNumber = e;
      this.getAllData();
    },
    DisplayData() {
      this.getAllData();
    },
    //根据批次号查询数据
    async getDataByBatch(e) {
      console.log("批次号", e);
      if (!e) {
        this.getAllData();
      } else {
        this.theBatch.farmBatch = e;
        const { data: res } = await getInfoByBatch(this.theBatch);
        console.log("请求到的列表", res);
        if (res.statusCode !== 20000) {
          this.$message.error("暂无该批次号数据");
        } else {
          const alist = [];
          alist[0] = res.data
          this.allList = alist;
        }
      }
    },

    //根据时间筛选数据
    async pickDate(e) {
      console.log("时间", e);
      if (!e) {
        this.getAllData();
      } else {
        this.searchByDate.date = e;
        const { data: res } = await getByDateInfo(this.searchByDate);
        console.log("请求到的列表", res);
        if (res.statusCode !== 20000) {
          this.$message.error("查询数据失败");
        } else {
          this.allList = res.data.records;
        }
      }
    },
    //打开新增表单
    addEven() {
      this.dialogVisible = true;
      this.title = "新增订单";
      this.addInfo = {
        baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
        baseName: "",
        destination: "",
        handler: "",
        remark: "",
        type: "鸽蛋",
        dovecoteOutBillDtoList: [
          {
            dovecoteDirector: "",
            dovecoteNumber: "",
            employeeName: "",
            remark: "",
            dovecoteOutBaseDtoList: [
              {
                amount: 0,
                remark: "",
                typeName: "",
                unitPrice: 0,
              },
            ],
          },
        ],
      };
    },

    //关闭表单
    closeAddDialog(a) {
      this.detailDialog = a
      this.dialogVisible = a;
      this.addInfo = {};
      this.getAllData();
    },

    //根据批次号查看详情
    async seeDetail(e) {
          this.theBatch.farmBatch = e;
          const { data: res } = await getInfoByBatch(this.theBatch);
          console.log(res);
          if (res.statusCode === 20000) {
            this.$message.success("查询详情成功");
            this.detailDialog = true
            this.detailInfo = res.data
            console.log("kkk",this.detailInfo)
          } else {
            if (res.data == null) {
              return this.$message.error("查询详情失败");
            }
          }
    },
    // 根据id删除订单
    async tableDelete(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该订单, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteOrder(id);
      if (res.statusCode == 20000) {
        this.$message.success("已成功删除该订单");
        this.getAllData();
      } else {
        this.$message.error("删除该订单失败");
      }
    },
    //当前页面
    changePage(page) {
      this.page.current = page.current;
      this.getAllData();
    },
    // 分页 改变每页显示的条数
    changeSize(size) {
      console.log(size);
      this.page.pageSize = size.size;
      this.getAllData();
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  background-color: #fafafa;
  width: 100%;
  height: auto;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.card {
  padding-right: 10px;
  background-image: url("../../../assets/image/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 300px;
  height: 300px;
}
</style>